<template>
  <view class="setting-container" :style="{height: `${windowHeight}px`}">
    <view class="menu-list">
      <view class="list-cell list-cell-arrow" @click="handleToPwd">
        <view class="menu-item-box">
          <view>修改密码</view>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
        <view class="menu-item-box">
          <view>检查更新</view>
        </view>
      </view>
      <view class="list-cell list-cell-arrow" @click="handleCleanTmp" :class="{loading: isCleaning}">
        <view class="menu-item-box">
          <view>清理缓存</view>
          <view class="cache-size">{{cacheSize || '计算中...'}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: uni.getSystemInfoSync().windowHeight,
      cacheSize: '', // 缓存大小
      isCleaning: false // 是否正在清理
    }
  },
  onLoad() {
    // 页面加载时计算缓存大小
    this.calculateCacheSize()
  },
  methods: {
    handleToPwd() {
      this.$commonFn.Navto('/pages/mine/pwd')
    },
    handleToUpgrade() {
      this.$commonFn.msg('已是最新版本~')
    },
    
    // 计算缓存大小
    calculateCacheSize() {
      uni.getStorageInfo({
        success: (res) => {
          // 转换缓存大小单位（字节 -> MB/KB）
          const size = res.currentSize
          if (size >= 1024 * 1024) {
            this.cacheSize = (size / (1024 * 1024)).toFixed(2) + ' MB'
          } else if (size >= 1024) {
            this.cacheSize = (size / 1024).toFixed(1) + ' KB'
          } else {
            this.cacheSize = size + ' B'
          }
        },
        fail: () => {
          this.cacheSize = '获取失败'
        }
      })
    },
    
    // 清理缓存
    handleCleanTmp() {
      if (this.isCleaning) return // 防止重复点击
      
      this.isCleaning = true
      this.$commonFn.msg('正在清理...')
      
      // 模拟清理过程（实际项目可根据需要清理特定缓存）
      setTimeout(() => {
        uni.clearStorage({
          success: () => {
            this.$commonFn.msg('清理成功')
            this.cacheSize = '0 B'
          },
          fail: () => {
            this.$commonFn.msg('清理失败，请重试')
          },
          complete: () => {
            this.isCleaning = false
          }
        })
      }, 800) // 模拟清理耗时
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.setting-container {
  padding: 20rpx 0;
  box-sizing: border-box;
}

.menu-list {
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  margin: 0 20rpx;
  overflow: hidden;
}

.list-cell {
  display: flex;
  align-items: center;
  padding: 30rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  transition: background-color 0.2s;

  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f5f5f5;
  }

  &.list-cell-arrow {
    position: relative;
    justify-content: space-between;

    &::after {
      content: "";
      position: absolute;
      right: 30rpx;
      top: 50%;
      width: 16rpx;
      height: 16rpx;
      border-right: 2rpx solid #999;
      border-bottom: 2rpx solid #999;
      transform: translateY(-50%) rotate(-45deg);
      opacity: 0.6;
    }
  }
  
  &.loading {
    .menu-icon {
      animation: rotate 1.5s linear infinite;
    }
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.menu-item-box {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.menu-icon {
  font-size: 36rpx;
  color: #2e7dfa;
  margin-right: 20rpx;
  transition: transform 0.2s;
}

.menu-item-box view:first-child {
  color: #333;
  font-size: 28rpx;
}

.cache-size {
  color: #999;
  font-size: 26rpx;
  margin-right: 30rpx; // 给箭头留出空间
}
</style>